import React from "react"
import {WhiteSpace, WingBlank} from "antd-mobile";
import ReactQuill from "react-quill";
import url from "url"
import {getStory} from "../../api";

export default class Detail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {text: ''} // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
        this.uuid = url.parse(this.props.location.search, true).query.uuid
        this.type = url.parse(this.props.location.search, true).query.type
        console.log(this.type)
    }

    componentDidMount() {
        this.getData()
    }

    modules = {
        toolbar: [
            [{'header': [1, 2, false]}],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
        ],
    }

    formats = [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'link', 'image'
    ]

    handleChange(value) {
        console.log(value)
        this.setState({text: value})
    }

    render() {
        const style = {
            backgroundImage: 'url("/img/tj/' + (this.type * 11) + '.png' + '")',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '100% 100%',

            paddingBottom: 66,
            borderStyle: 'solid',
            borderWidth: 16,
            borderColor: '#86c4cd',
            borderRadius: 16,
            height: 400
        }

        return (
            <div>
                <WhiteSpace/>
                <WingBlank>
                    <div style={{width: '100%', height: '100%', textAlign: "center"}}>
                        <ReactQuill value={this.state.text}
                                    style={style}
                                    theme='bubble'
                                    // modules={this.modules}
                                    readOnly={true}
                                    formats={this.formats}
                                    onChange={this.handleChange}/>
                        <img onClick={this.goTo} style={{paddingTop: '8%', paddingBotton: '8%', width: '72%'}}
                             src="/img/tj/资源 45@2x.png" alt=""/>
                    </div>
                </WingBlank>
            </div>
        );
    }

    goTo = () => {
        this.props.history.push('/story/comment?uuid='+this.uuid)
    }
    getData = async () => {
        let res = await getStory(this.uuid)
        this.setState({
            text: res.data.content
        })
    }
}